// pages/weatherDetail/weatherDetail.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    forecast: [],
    showLoading: false,
    
    dayOneImgDay:'',
    dayTwoImgDay:'',
    dayThreeImgDay:'',
    dayOneImgNight: '',
    dayTwoImgNight: '',
    dayThreeImgNight: '',
  },

  // 获取更多天气
  getForecastWeather: function(userCity) {
    var that = this;
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/forecast?',
      data: {
        location: userCity,
        key: '214938f171674078b8c2d80631122f25'
      },
      success: function(res) {
        that.setData({ forecast: res.data.HeWeather6[0].daily_forecast });
        that.setData({ showLoading: true });
        that.setData({ dayOneImgDay: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[0].cond_code_d+'.png'})
        that.setData({ dayTwoImgDay: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[1].cond_code_d+'.png'})
        that.setData({ dayThreeImgDay: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[2].cond_code_d+'.png'})
        that.setData({ dayOneImgNight: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[0].cond_code_n + '.png' })
        that.setData({ dayTwoImgNight: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[1].cond_code_n + '.png' })
        that.setData({ dayThreeImgNight: '/image/weather/' + res.data.HeWeather6[0].daily_forecast[2].cond_code_n + '.png' })
      }
    });
   
  },
  save: function () {
    const that = this
    let foreCast = that.data.forecast
    let dayOneImgDay = that.data.dayOneImgDay
    let dayTwoImgDay = that.data.dayTwoImgDay
    let dayThreeImgDay = that.data.dayThreeImgDay
    let dayOneImgNight = that.data.dayOneImgNight
    let dayTwoImgNight = that.data.dayTwoImgNight
    let dayThreeImgNight = that.data.dayThreeImgNight
    
    const ctx = wx.createCanvasContext("myCanvas")
    ctx.setFillStyle("#fff")
    ctx.fillRect(0, 0, 450, 600)
  // 第一行
    ctx.setFontSize(14);
    ctx.setFillStyle('#000000');
    ctx.fillText(foreCast[0].date,20,50)
    ctx.fillText(foreCast[1].date,160,50)
    ctx.fillText(foreCast[2].date,300,50)


  // 第二行
    ctx.drawImage(dayOneImgDay, 50, 70,40,40)
    ctx.drawImage(dayTwoImgDay, 180, 70, 40, 40)
    ctx.drawImage(dayThreeImgDay, 320, 70, 40, 40)
    ctx.setFontSize(15);
    ctx.setFillStyle('#000000');
    ctx.fillText(foreCast[0].cond_txt_d, 60, 130)
    ctx.fillText(foreCast[1].cond_txt_d, 190, 130)
    ctx.fillText(foreCast[2].cond_txt_d, 330, 130)

  // 第三行 
    ctx.setFontSize(15);
    ctx.setFillStyle('#000000');
    ctx.fillText('最高温度', 40, 170)
    ctx.fillText('最高温度', 180, 170)
    ctx.fillText('最高温度', 320, 170)
    ctx.fillText(foreCast[0].tmp_max + '℃', 50, 190)
    ctx.fillText(foreCast[1].tmp_max + '℃', 180, 190)
    ctx.fillText(foreCast[2].tmp_max + '℃', 320, 190)

  // 第四行 
    ctx.setFontSize(14);
    ctx.setFillStyle('#000000');
    ctx.fillText('最低温度', 40, 230)
    ctx.fillText('最低温度', 180, 230)
    ctx.fillText('最低温度', 320, 230)
    ctx.fillText(foreCast[0].tmp_min + '℃', 50, 250)
    ctx.fillText(foreCast[1].tmp_min + '℃', 180, 250)
    ctx.fillText(foreCast[2].tmp_min + '℃', 320, 250)

  // 第五行 
    ctx.drawImage(dayOneImgNight, 50, 270, 40, 40)
    ctx.drawImage(dayTwoImgNight, 180, 270, 40, 40)
    ctx.drawImage(dayThreeImgNight, 320, 270, 40, 40)
    ctx.setFontSize(15);
    ctx.setFillStyle('#000000');
    ctx.fillText(foreCast[0].cond_txt_n, 60, 330)
    ctx.fillText(foreCast[1].cond_txt_n, 190, 330)
    ctx.fillText(foreCast[2].cond_txt_n, 330, 330)

  // 第六行 
    ctx.setFontSize(15);
    ctx.setFillStyle('#000000');
    ctx.fillText(foreCast[0].wind_dir, 50, 370)
    ctx.fillText(foreCast[1].wind_dir, 180, 370)
    ctx.fillText(foreCast[2].wind_dir, 320, 370)
    ctx.fillText(foreCast[0].wind_spd+'级', 50, 390)
    ctx.fillText(foreCast[1].wind_spd + '级', 180, 390)
    ctx.fillText(foreCast[2].wind_spd + '级', 320, 390)
  
    ctx.draw(true, setTimeout(() => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 450,
        height: 600,
        destWidth: 450,
        destHeight: 600,
        canvasId: 'myCanvas',
        success: (res) => {
          console.log(res.tempFilePath)
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              that.setData({
                canvasHidden: false
              });
              wx.showToast({
                title: '图片保存中...',
                duration: 1000
              });
              setTimeout(() => {
                wx.showToast({
                  title: '图片保存成功',
                  duration: 2000
                })
              }, 2000)
            },
            fail(res) {
              if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg == "saveImageToPhotosAlbum:fail:auth denied" || res.errMsg == "saveImageToPhotosAlbum:fail authorize no response") {
                wx.showModal({
                  title: '提示',
                  content: '需要授权才可保存图片',
                  showCancel: false,
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting({
                        success(settingdata) {
                          if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                            wx.showToast({
                              title: '获取权限成功，再次点击可保存图片',
                              icon: 'none',
                              duration: 2000
                            })
                          } else {
                            wx.showToast({
                              title: '获取权限失败',
                              icon: 'none',
                              duration: 2000
                            })
                          }
                        },
                        fail() {
                          wx.showToast({
                            title: '获取权限失败',
                            duration: 2000
                          })
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
      })
    }, 100)
      ,

    )
    console.log(2)
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
   
    this.getForecastWeather(options.user_city);


    let that = this
    wx.getSystemInfo({
      success: (res) => {
        that.setData({
          deviceWidth : res.screenWidth
        })
        console.log(res.screenWidth)

      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {}
});
